<template>
    <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="80px"
        class="orderNumber-searchfor-warp"
    >
        <el-form-item :label="$t('m.label.country')" prop="countryIds"  label-width="60px">
            <country :form="ruleForm" formId="countryIds" :multiple="true" addSize="mini"></country>
        </el-form-item>
        <el-form-item :label="$t('m.label.BU')" prop="businessUnitId"  label-width="60px">
            <BU
                :form="ruleForm"
                formId="businessUnitId"
                :multiple="true"
                addSize="mini"
                @selectAll="getCategory"
                @selectDel="getCategory"
            ></BU>
        </el-form-item>
        <el-form-item :label="$t('m.label.productCategory')" prop="productCategoryId">
            <category
                ref="category"
                :form="ruleForm"
                formId="productCategoryId"
                formBU="businessUnitId"
                :multiple="true"
                @selectAll="getProduct"
                @selectDel="getProduct"
                addSize="mini"
            ></category>
        </el-form-item>
        <el-form-item :label="$t('m.label.productModelNumber')" prop="productIds">
            <product
                ref="product"
                formId="productIds"
                formBU="businessUnitId"
                formCategory="productCategoryId"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getASIN"
                @selectDel="getASIN"
                addSize="mini"
            ></product>
        </el-form-item>
        <el-form-item :label="$t('m.label.ASIN')" prop="asinIds" label-width="60px">
            <ASIN
                ref="ASIN"
                formId="asinIds"
                formBU="businessUnitId"
                formCategory="productCategoryId"
                formProduct="productIds"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getReverse"
                @selectDel="getReverse"
                addSize="mini"
            ></ASIN>
        </el-form-item>
        <el-form-item label-width="20px">
            <el-button @click="resetForm('ruleForm')" icon="el-icon-circle-close">{{$t('m.button.reset')}}</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { BU, category, product, ASIN ,country} from "components/searchfor";
const ERR_OK = 200;
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (
                this.ruleForm.asinIds.length === 0 &&
                this.ruleForm.productIds.length === 0
            ) {
                callback(new Error(this.$t('m.placeholder.selectProductModelNumberAndASIN')));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        return {
            ruleForm: {
                asinIds: [],
                countryIds: [],
                productIds: [],
                businessUnitId: [],
                productCategoryId: []
            },
            rules: {
                countryIds: [
                    { required: true, message: this.$t('m.placeholder.selectCountry'), trigger: "change" }
                ],
                productIds: [{ required: true,validator: validatePass, trigger: "change" }],
                asinIds: [{ required: true,validator: validatePass, trigger: "change" }]
            }
        };
    },
    methods: {
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getASIN() {
            this.$refs.product.getProduct(true);
            this.$refs.ASIN.getASIN();
        },
        getReverse() {
            this.$refs.ASIN.getASIN(true);
        },
        // 提交查询
        _submitForm() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.$parent.formData = this.ruleForm;
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        }
    },
    components: {
        BU,
        category,
        product,
        ASIN,
        country
    }
};
</script>
<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
    margin-bottom 10px;
}
</style>